import React from 'react'
import { NavBar, Toast } from 'react-vant';
import s from './style.module.less'
import MyIcon from '@/components/myIcon'
import { useNavigate } from 'react-router-dom';
import { useStore, observer } from '@/store'
import cx from 'classnames'
const User = () => {
  // 解构出userStore仓库
  const { userStore } = useStore()
  const navigate = useNavigate()

  const showSetting = () => {
    navigate('/setting')   //跳转设置页面
  }

  const goToLogin = () => {
    if(userStore.isLogin){
      Toast.info('已登录')
    }else{
      navigate('/login')
    }
  }
  return (
    <div className={s.main}>
      <NavBar
        title="我的"
        leftArrow={false}
        rightText={<MyIcon name="icon-shezhi" fontSize={20} />}
        onClickRight={() => showSetting()}
      />
      <div className={s.user}>
        <div className={s.name} onClick={() => goToLogin()}>{userStore.isLogin ? userStore.LoginInNickName : userStore.unLoginInNickName}</div>
        <div className={s.avater}>
          <img src={userStore.isLogin ?userStore.LoginInImg : userStore.unLoginInImg} alt="" />
        </div>
      </div>


      <div className={s.Info}>
        <div className={s.box}>
          <MyIcon name='icon-liulanjilu' fontSize='25px' />
          <div className={s.des}>浏览记录</div>
        </div>
        <div className={s.box}>
          <MyIcon name='icon-paizhao' fontSize='25px' />
          <div className={s.des}>看房管理</div>
        </div>
        <div className={s.box}>
          <MyIcon name='icon-dingdan' fontSize='25px' />
          <div className={s.des}>交易订单</div>
        </div>
        <div className={s.box}>
          <MyIcon name='icon-youhuiquan' fontSize='25px' />
          <div className={s.des}>优惠券</div>
        </div>

      </div>
      <div className={s.add} onClick={() => navigate('/addmyhouse')}>
        <div className={s.title}>我的房子</div>
        <div className={s.addCard}>
          <div className={s.add}><MyIcon name="icon-tianjia" fontSize="50px" /></div>
          <div className={s.des}>
            <div className={s.top}>添资产·享服务</div>
            <div className={s.botton}>了解房价行情，获取优质服务</div>
          </div>
        </div>
      </div>

      <div className={s.houseList}>
        <div className={s.title}>我的房产</div>
       <div className={cx({[s.hidden]:!userStore.isLogin})}>
       {
          userStore.houseArr.map((item, index) => {
            return <div key={index} className={s.house}>
              <div className={s.left}>
                <div className={s.img}>
                  <img src="https://ts1.cn.mm.bing.net/th?id=OIP-C.QPH1IBosDYBqaU3O6wV3YAHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=1.1&pid=3.1&rm=2" alt="" />

                </div>
              </div>
              <div className={s.right}>
                <div className={s.box}>{item.city}</div>
                <div className={s.box}>{item.community}</div>
                <div className={s.box}>{item.area}</div>
                <div className={s.box}>{item.type}</div>
                <div className={s.box}>{item.forward}</div>
                <div className={s.box}>{item.floor}</div>
              </div>
            </div>
          })

        }
       </div>
      </div>
    </div>
  )
}

// observer包裹组件，使得mobx仓库中的数据关联上组件
export default observer(User)